<template>
  <div class="header">
    <div class="menu-circle"></div>
    <div class="header-menu">

      <template v-for="(link, index) in menuLinks" :key="index">
        <a class="menu-link" 
        :class="{ 'is-active': link.isActive, notify: link.notify }"
          @click="activateLink(link)">
          {{ link.text }}
        </a>
      </template>
    </div>
    <div class="search-bar">
      <input type="text" placeholder="Search">
    </div>
    <div class="header-profile">
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 定义菜单链接的数据
const menuLinks = reactive([
  { text: 'Apps', isActive: true, notify: false },
  { text: 'Your work', isActive: false, notify: true },
  { text: 'Discover', isActive: false, notify: false },
  { text: 'Market', isActive: false, notify: true },
]);

// 激活链接的函数
function activateLink(link) {
  menuLinks.forEach((l) => {
    l.isActive = false;
  });
  link.isActive = true;
}
</script>
<style>
@import url(../css/header.css);
</style>